<template>
	<view class="content">
		<view class="HouseTitle">房源信息</view>
		
		<region-picker @change="region_change" :value="350104">
		    <view class="picker location">请选地区: {{house.houseProvince}} {{house.houseCity}} {{house.houseRegion}}</view>
		</region-picker>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseDetailaddress" v-model="house.houseDetailaddress" placeholder="请输入具体地理位置" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseType" v-model="house.houseType" placeholder="请输入房屋类型" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseArea" v-model="house.houseArea" required placeholder="请输入房屋面积" />
		</view>
		
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseWedge" v-model="house.houseWedge" placeholder="请输入楼型" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseDirection" v-model="house.houseDirection" placeholder="请输入朝向" />
		</view>	
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseEstate" v-model="house.houseEstate" placeholder="请输入房屋所在小区" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseFitment" v-model="house.houseFitment" placeholder="请输入装修程度" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseSellpoint" v-model="house.houseSellpoint" placeholder="请输入房屋卖点" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseHtype" v-model="house.houseHtype" placeholder="请输入户型介绍" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseTax" v-model="house.houseTax" placeholder="请输入税费" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseBside" v-model="house.houseBside" placeholder="请输入周边配套" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseTraffic" v-model="house.houseTraffic" placeholder="请输入交通出行" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" name="houseRemark" v-model="house.houseRemark" placeholder="请输入房屋备注" />
		</view>
		<view class="uni-form-item uni-column">
			<uni-datetime-picker style="float: right;" placeholder="建成时间" @change="house_create_change" returnType="timestamp"></uni-datetime-picker>
		</view>
		
		<view class="uni-form-item">
			<view class="bedroomFont">请选择卧室数量:</view>
			<uni-number-box style="float: right;" v-model="house.houseBedroomnum" :min="0" :max="100"></uni-number-box>
		</view>
		
		
		<view class="uni-form-item">
			<view class="bedroomFont">请选择客厅数量:</view>
			<uni-number-box style="float: right;" v-model="house.houseLivingnum" :min="0" :max="100"></uni-number-box>
		</view>
		
		
		<view class="uni-form-item">
			<view class="bedroomFont">请选择房屋楼层:</view>
			<uni-number-box style="float: right;" v-model="house.houseFloor" :min="0" :max="100"></uni-number-box>
		</view>
		
		<button type="primary" @click="submitHouseInfo" :disabled="submitHouse">提交房源信息</button>
		
		
		<view class="RentTitle" v-show="show">租房信息</view>
		<view class="uni-form-item uni-column" v-show="show">
			<input class="uni-input" name="rentingHeading" v-model="renting.rentingHeading" placeholder="请输入租房标题" />
		</view>
		<view class="uni-form-item uni-column" v-show="show">
			<input class="uni-input" name="rentingPrice" v-model="renting.rentingPrice" placeholder="请输入租房价格" />
		</view>
		
		<view class="uni-form-item" v-show="show">
			<view class="bedroomFont">请选择最少租房时间(月):</view>
			<uni-number-box style="float: right;" v-model="renting.rentingMintime" :min="0" :max="100"></uni-number-box>
		</view>
		
		
		<view class="uni-form-item" v-show="show">
			<view class="bedroomFont">是否可随时入住</view>
			<radio-group style="float: right; padding-top: 5px;" @change="houseRentingAnytimeChange">
				<label class="radio uni-input"><radio value=1 checked="true" style="transform:scale(0.6)" />是</label>
				<label class="radio uni-input"><radio value=0 style="transform:scale(0.6)" />否</label>
			</radio-group>
		</view>
		
<!-- 		<view class="uni-form-item uni-column" v-show="show">
			<view class="uni-title">是否可随时入住</view>
			<radio-group>
				<label class="radio uni-input"><radio value="1" checked="true" style="transform:scale(0.6)" />是</label>
				<label class="radio uni-input"><radio value="0" style="transform:scale(0.6)" />否</label>
			</radio-group>
		</view> -->
		
		<view class="uni-form-item uni-column" v-show="show">
			<input class="uni-input" name="rentingRemark" v-model="renting.rentingRemark" placeholder="请输入租房备注" />
		</view>
		<button type="photoButton" @click="uploadHousePhoto" v-show="show">上传房屋图片</button>
		<button type="primary" @click="submitRentHouse" v-show="show">发布租房委托</button>
		
		
	</view>
</template>

<script>
	import regionPicker from '../components/region-picker/region-picker.vue'
	import { uDatetimePicker } from '@dcloudio/uni-ui'
	import { uNumberBox } from '@dcloudio/uni-ui'
	import { mapState,mapActions } from 'vuex'
	export default {
		components:{
			regionPicker
		},
		data() {
			return {
				submitHouse:false,
				show: false,
				housePhoto:null,
				house:{
					houseId:0,
					userId:null,
					houseProvince:"",
					houseCity:"",
					houseRegion:"",
					houseDetailaddress:"",
					houseType:"",
					houseArea:null, //double
					houseBedroomnum:0, //int
					houseLivingnum:0, //int
					houseFloor:0, //int
					houseWedge:"",
					houseDirection:"",
					houseEstate:"", //房屋所在小区
					houseElevator:0, //int
					houseFitment:"",
					houseCreattime:null, //long
					houseSellpoint:"",
					houseHtype:"",
					houseTax:"",
					houseBside:"",
					houseTraffic:"",
					houseVr:0, //int
					houseVrlink:"",
					houseRemark:"",
					houseSurfaceplot:"",
					houseState:1,
					houseIsdelete:0, //int
				},
				renting:{
					houseId:null, //int 
					rentingHeading:"",  //租房标题
					rentingPrice:null, //double 租房价格
					rentingMintime:0, //int 最少租房时间
					rentingAnytime:0, //int 随时入住?
					rentingRemark:"",  //租房备注
					rentingCreattime:null, //long 发布租房信息时间
					rentingApply:1, //int  租房信息可用?
					rentingState:0, //int  租房申请通过
				}
			}
		},
		methods: {
			...mapActions(['setUser']),
			region_change(res){
				this.house.houseProvince=res.detail.value[0];
				this.house.houseCity=res.detail.value[1];
				this.house.houseRegion=res.detail.value[2];
			},
			house_create_change(res){
				console.log(res)
				this.house.houseCreattime = res
				// var date = new Date(res.detail.value)
				// this.house.houseCreattime = date.getTime()
			},
			submitHouseInfo(){
				if(this.house.houseArea == null){
					uni.showToast({
						title: '请填写房屋面积',
						icon:'none',
						duration: 2000
					})
					return false;
				}
				this.house.userId = this.user.userId
				this.$axios.post('addHouse',this.qs.stringify(this.house))
				
				.then((res)=>{
					console.log(res)
					if(res.status == 200){
						uni.showToast({
							title:"新增房源成功!",
							duration:1000
						})
						this.show = true
						this.submitHouse = true
						this.house.houseId = res.data.house.houseId
						console.log(this.house.houseId)
					}else{
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '新增失败，请检查您的房源输入信息'
						});
					}
				})
				.catch((e)=>{
					console.log(e)
				})
			},
			houseRentingAnytimeChange(data){
				this.renting.rentingAnytime = Integer.parse(data.detail.value)
			},
			submitRentHouse(){
				var now= Date.parse(new Date())
				this.renting.rentingCreattime = now
				this.renting.houseId = this.house.houseId
				console.log(this.renting)
				this.$axios.post('addRenting',this.qs.stringify(this.renting))
				.then((res)=>{
					console.log(res)
					if(res.status == 200){
						
						uni.showToast({
							title:"成功发布租房!",
							duration:1000
						})
						if(this.housePhoto){
							uni.uploadFile({
								url: this.baseURL + 'upload/housePhoto',
								filePath: this.housePhoto[0],
								name: 'file',
								formData: {
									'houseId': this.house.houseId
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes);
									if(uploadFileRes.statusCode==200){
										uni.showToast({
											title:"图片上传成功!",
											duration:1000
										})
										uni.switchTab({
											url:"/pages/mine/index"
										})
									}else{
										uni.showToast({
											title:"图片上传失败!",
											duration:1000
										})
									}
								},
								fail: e => {
									console.log(e)
									uni.showToast({
										title:"房屋图片上传失败!",
										duration:1000
									})
								}
							})
						}
					}else{
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '新增失败，请检查您输入的房屋出租基本信息'
						});
					}
				})
				.catch((e)=>{
					console.log(e)
				})
				
				
			},
			uploadHousePhoto(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.housePhoto = res.tempFilePaths
					}
				})
			}
		},
		computed:{
			...mapState(['user'])
		},
		mounted(){

		}
	}
</script>

<style lang="scss" scoped>
$color-primary: #3881ce;
button[type="primary"]{
	background-color: $color-primary;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 60upx;
}
.content{
	padding: 60upx 100upx 100upx;
	border-color: #3881CE;
	border-width: 3rpx;
	border-radius: 5%;
	// background-color: #3881CE;
}

.HouseTitle{
	color: #333;
	margin-bottom: 15upx;
	padding: 0;
	text-align: center;
	font-size: 20px;
	border-radius: 50%;
}
.location{
	font-size: 30upx;
	padding: 7px 0;
	color:#777777
}
button[type="photoButton"]{
	background-color: #F1F1F1;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 20upx;
}
.bedroomFont{
	font-size: 30upx;
	padding: 7px 0;
	color:#777777;
	// background-color:#0065D9;
	width:250rpx;
	float:left
}
.RentTitle{
	color: #333;
	margin-top: 40px;
	margin-bottom: 15upx;
	padding: 0;
	text-align: center;
	font-size: 20px;
	border-radius: 50%;
}
.uni-form-item{
	margin-bottom: 25upx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;
	.uni-input{
		font-size: 30upx;
		padding: 7px 0;
	}
}
</style>
